Osvojte si javascriptový operátor nullish coalescing (??) pre čistejšie a efektívnejšie priraďovanie predvolených hodnôt. Zistite, ako sa líši od operátora OR (||), a pozrite si praktické príklady.
JavaScript Nullish Coalescing: Komplexný sprievodca priraďovaním predvolených hodnôt
V JavaScripte je priraďovanie predvolených hodnôt bežnou úlohou. Tradične na tento účel vývojári používali operátor OR (||
). Avšak operátor nullish coalescing (??
), predstavený v ECMAScript 2020, poskytuje presnejší a spoľahlivejší spôsob spracovania priraďovania predvolených hodnôt, najmä pri práci s hodnotami null
alebo undefined
. Tento sprievodca poskytuje hĺbkový pohľad na operátor nullish coalescing, skúma jeho syntax, správanie, rozdiely oproti operátoru OR a praktické prípady použitia.
Čo je Nullish Coalescing?
Operátor nullish coalescing (??
) je logický operátor, ktorý vráti svoj operand na pravej strane, keď je jeho operand na ľavej strane null
alebo undefined
. V opačnom prípade vráti svoj operand na ľavej strane. Jednoducho povedané, poskytuje predvolenú hodnotu iba vtedy, keď je premenná striktne null
alebo undefined
.
Syntax
Syntax operátora nullish coalescing je jednoduchá:
leftOperand ?? rightOperand
Tu je leftOperand
premenná alebo výraz, ktorý chcete skontrolovať na hodnotu null
alebo undefined
, a rightOperand
je predvolená hodnota, ktorú chcete priradiť, ak je leftOperand
skutočne null
alebo undefined
.
Príklad
Zvážte nasledujúci príklad:
const username = null ?? "Guest";
console.log(username); // Výstup: Guest
const age = undefined ?? 25;
console.log(age); // Výstup: 25
const city = "London" ?? "Unknown";
console.log(city); // Výstup: London
V tomto príklade je premennej username
priradená predvolená hodnota "Guest", pretože je pôvodne null
. Podobne je premennej age
priradená hodnota 25, pretože začína ako undefined
. Premenná city
si však zachováva svoju pôvodnú hodnotu, "London", pretože nie je ani null
, ani undefined
.
Nulové vs. Falsy hodnoty
Je kľúčové pochopiť rozdiel medzi nulovými (nullish) a falsy hodnotami v JavaScripte. Nulová hodnota je buď null
alebo undefined
. Falsy hodnota je hodnota, ktorá sa v booleovskom kontexte považuje za false. Medzi falsy hodnoty patria:
null
undefined
0
(nula)NaN
(Not a Number)''
(prázdny reťazec)false
Kľúčovým rozdielom je, že operátor nullish coalescing kontroluje iba hodnoty null
alebo undefined
, zatiaľ čo operátor OR (||
) kontroluje akúkoľvek falsy hodnotu.
Rozdiel medzi ??
a ||
Operátor OR (||
) je logický operátor OR, ktorý vráti pravý operand, ak je ľavý operand falsy. Hoci sa dá použiť na priraďovanie predvolených hodnôt, môže viesť k neočakávanému správaniu pri práci s hodnotami ako 0
alebo prázdny reťazec.
Príklad: Úskalia operátora ||
const quantity = 0 || 10; // Chceme predvolenú hodnotu 10, ak quantity chýba
console.log(quantity); // Výstup: 10 (Neočakávané!) pretože 0 je falsy
const text = '' || 'Default Text'; // Chceme predvolený text, ak text chýba
console.log(text); // Výstup: Default Text (Neočakávané!) pretože '' je falsy
V prvom príklade sme chceli priradiť predvolené množstvo 10 iba vtedy, ak quantity
chýbalo (bolo null
alebo undefined
). Avšak, pretože 0
je falsy hodnota, operátor OR nesprávne priradil predvolenú hodnotu. Podobne prázdny reťazec spôsobí zobrazenie predvoleného textu, aj keď reťazec existuje (ale je prázdny).
Použitie ??
pre presnosť
Prepíšme predchádzajúci príklad s použitím operátora nullish coalescing:
const quantity = 0 ?? 10;
console.log(quantity); // Výstup: 0 (Správne!)
const text = '' ?? 'Default Text';
console.log(text); // Výstup: '' (Správne!)
Teraz je výstup taký, ako sa očakávalo. Operátor nullish coalescing kontroluje iba hodnoty null
alebo undefined
, takže 0
a ''
sa považujú za platné hodnoty a ich pôvodné hodnoty sa zachovávajú.
Prípady použitia pre Nullish Coalescing
Operátor nullish coalescing je užitočný v rôznych scenároch, kde potrebujete poskytnúť predvolené hodnoty iba vtedy, keď je premenná striktne null
alebo undefined
. Tu sú niektoré bežné prípady použitia:
1. Spracovanie voliteľných parametrov funkcie
Pri definovaní funkcie s voliteľnými parametrami môžete použiť operátor nullish coalescing na poskytnutie predvolených hodnôt, ak parametre nie sú zadané.
function greet(name, greeting) {
const userName = name ?? "User";
const userGreeting = greeting ?? "Hello";
console.log(`${userGreeting}, ${userName}!`);
}
greet(); // Výstup: Hello, User!
greet("Alice"); // Výstup: Hello, Alice!
greet("Bob", "Greetings"); // Výstup: Greetings, Bob!
2. Nastavenie predvolených možností konfigurácie
Pri práci s konfiguračnými objektmi môžete použiť operátor nullish coalescing, aby ste zabezpečili použitie predvolených hodnôt, ak určité možnosti konfigurácie nie sú špecifikované.
const config = {
timeout: 5000,
retries: 3
};
function fetchData(options) {
const timeout = options.timeout ?? 10000; // Predvolený časový limit 10 sekúnd
const retries = options.retries ?? 5; // Predvolených 5 pokusov
console.log(`Timeout: ${timeout}, Retries: ${retries}`);
}
fetchData(config); // Výstup: Timeout: 5000, Retries: 3
fetchData({}); // Výstup: Timeout: 10000, Retries: 5
fetchData({timeout:null, retries: undefined}); // Výstup: Timeout: 10000, Retries: 5
3. Prístup k vlastnostiam vnorených objektov
Pri prístupe k vlastnostiam vnorených objektov môže byť operátor nullish coalescing kombinovaný s operátorom optional chaining (?.
), aby sa poskytli predvolené hodnoty, ak sú niektoré z medzivlastností null
alebo undefined
.
const user = {
profile: {
address: {
city: "New York"
}
}
};
const cityName = user?.profile?.address?.city ?? "Unknown";
console.log(cityName); // Výstup: New York
const unknownUser = {};
const unknownCityName = unknownUser?.profile?.address?.city ?? "Unknown";
console.log(unknownCityName); // Výstup: Unknown
4. Práca s API a externými dátami
Pri získavaní údajov z API alebo externých zdrojov sa operátor nullish coalescing môže použiť na poskytnutie predvolených hodnôt, ak niektoré dátové polia chýbajú alebo majú hodnoty null
či undefined
. Zvážte získavanie údajov o používateľoch z rôznych regiónov. Predpokladajme, že niektoré regióny nemusia vo svojich používateľských údajoch zahŕňať pole `country`.
async function getUserData(userId) {
try {
const response = await fetch(`https://api.example.com/users/${userId}`);
const data = await response.json();
const country = data.country ?? "Neznáma krajina";
const timezone = data.timezone ?? "UTC";
console.log(`Používateľ je z: ${country}, Časové pásmo: ${timezone}`);
} catch (error) {
console.error("Chyba pri získavaní údajov používateľa:", error);
}
}
// Simulácia rôznych odpovedí API:
const userWithCountry = { name: "John", country: "USA", timezone: "EST" };
const userWithoutCountry = { name: "Jane", timezone: "GMT" };
// Na otestovanie by ste potrebovali skutočné API alebo mock fetch.
// Na účely demonštrácie simulujme odpovede:
global.fetch = async (url) => {
if (url.includes("123")) {
return { json: async () => userWithCountry };
} else if (url.includes("456")) {
return { json: async () => userWithoutCountry };
}
throw new Error("Neočakávaná URL");
};
getUserData(123); // Výstup: Používateľ je z: USA, Časové pásmo: EST
getUserData(456); // Výstup: Používateľ je z: Neznáma krajina, Časové pásmo: GMT
Precedencia operátorov
Operátor nullish coalescing má relatívne nízku precedenciu. Je nižšia ako precedencia operátorov OR (||
) a AND (&&
). Preto pri kombinovaní operátora nullish coalescing s inými logickými operátormi je nevyhnutné použiť zátvorky na explicitné definovanie poradia operácií. Ak tak neurobíte, môže to viesť k syntaktickým chybám alebo neočakávanému správaniu.
Príklad: Použitie zátvoriek pre lepšiu prehľadnosť
// Bez zátvoriek (SyntaxError)
// const result = false || null ?? "Default"; // SyntaxError: Unexpected token '??'
// So zátvorkami (Správne)
const result = false || (null ?? "Default");
console.log(result); // Výstup: Default
const anotherResult = (false || null) ?? "Default";
console.log(anotherResult); // Výstup: null
V prvom príklade vedie absencia zátvoriek k chybe SyntaxError
, pretože JavaScriptový engine nedokáže určiť zamýšľané poradie operácií. Pridaním zátvoriek explicitne povieme enginu, aby najprv vyhodnotil operátor nullish coalescing. Druhý príklad je platný; avšak výstup je iný, pretože výraz s ||
sa vyhodnotí ako prvý.
Kompatibilita s prehliadačmi
Operátor nullish coalescing (??
) je relatívne nová funkcia, preto je dôležité zvážiť kompatibilitu s prehliadačmi, najmä ak cielite na staršie prehliadače. Väčšina moderných prehliadačov podporuje operátor nullish coalescing, vrátane:
- Chrome 80+
- Firefox 72+
- Safari 13.1+
- Edge 80+
- Node.js 14+
Ak potrebujete podporovať staršie prehliadače, môžete použiť transpilátor ako Babel na konverziu vášho kódu na kompatibilnú verziu JavaScriptu. Babel transformuje operátor ??
na ekvivalentný JavaScriptový kód, ktorý funguje v starších prostrediach.
Osvedčené postupy
Tu sú niektoré osvedčené postupy pre efektívne používanie operátora nullish coalescing:
- Používajte
??
pre kontrolu nulových hodnôt: Používajte operátor nullish coalescing (??
), keď chcete špecificky poskytnúť predvolenú hodnotu iba vtedy, keď je premennánull
aleboundefined
. - Používajte zátvorky pre zložité výrazy: Pri kombinovaní operátora nullish coalescing s inými logickými operátormi používajte zátvorky na jasné definovanie poradia operácií.
- Zvážte kompatibilitu s prehliadačmi: Skontrolujte kompatibilitu s prehliadačmi a v prípade potreby použite transpilátor na podporu starších prehliadačov.
- Používajte ho konzistentne: Osvojte si používanie
??
tam, kde je to vhodné, pre predvídateľnejší štýl kódovania v celom projekte. - Kombinujte s operátorom optional chaining: Používajte
??
v spojení s operátorom optional chaining?.
na bezpečný prístup a priradenie predvolených hodnôt k vnoreným vlastnostiam objektov.
Globálne aspekty
Pri vývoji pre globálne publikum zvážte nasledujúce body týkajúce sa priraďovania predvolených hodnôt:
- Lokalizácia: Predvolené hodnoty môže byť potrebné lokalizovať na základe jazyka alebo regiónu používateľa. Napríklad predvolený symbol meny alebo formát dátumu.
- Kultúrne normy: Niektoré predvolené hodnoty môže byť potrebné upraviť na základe kultúrnych noriem. Napríklad predvolená uvítacia správa sa môže v rôznych kultúrach líšiť.
- Prístupnosť: Zabezpečte, aby boli predvolené hodnoty prístupné a zrozumiteľné pre používateľov so zdravotným postihnutím. Poskytnite jasné a popisné štítky pre predvolené hodnoty v používateľských rozhraniach.
- Časové pásma a dátumy: Pri práci s dátumami a časmi používajte vhodné časové pásma a formáty dátumov, aby sa zabezpečilo správne zobrazenie predvolených hodnôt používateľom v rôznych regiónoch.
Príklad: Lokalizácia s Nullish Coalescing
Povedzme, že chcete zobraziť predvolenú uvítaciu správu v rôznych jazykoch na základe miestneho nastavenia používateľa. Môžete použiť operátor nullish coalescing na poskytnutie predvolenej správy, ak lokalizovaná správa nie je k dispozícii.
function getWelcomeMessage(locale) {
const localizedMessages = {
en: "Welcome!",
fr: "Bienvenue !",
de: "Willkommen!"
};
const message = localizedMessages[locale] ?? "Welcome!"; // Predvolená hodnota je angličtina, ak sa lokalizácia nenájde
return message;
}
console.log(getWelcomeMessage("fr")); // Výstup: Bienvenue !
console.log(getWelcomeMessage("es")); // Výstup: Welcome! (Používa sa predvolená anglická verzia)
Záver
Operátor nullish coalescing (??
) je cenným prírastkom do jazyka JavaScript. Poskytuje presnejší a spoľahlivejší spôsob priraďovania predvolených hodnôt v porovnaní s operátorom OR (||
), najmä pri práci s hodnotami ako 0
alebo prázdnymi reťazcami. Pochopením jeho syntaxe, správania a prípadov použitia môžete písať čistejší a udržateľnejší kód, ktorý presne spracováva priraďovanie predvolených hodnôt. Pri používaní operátora nullish coalescing vo svojich projektoch nezabudnite zvážiť kompatibilitu s prehliadačmi, precedenciu operátorov a globálne aspekty.
Dodržiavaním osvedčených postupov uvedených v tomto sprievodcovi môžete efektívne využiť operátor nullish coalescing na zlepšenie kvality a spoľahlivosti vášho JavaScriptového kódu, čím sa stane robustnejším a ľahšie pochopiteľným. Nezabudnite vo svojom kóde vždy uprednostňovať prehľadnosť a udržateľnosť, a operátor nullish coalescing môže byť silným nástrojom na dosiahnutie týchto cieľov.